{extend name="admin@public/basic" /}
{block name="style"}{/block}
<!-- <link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/> -->

{block name="cotent"}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
<style>
    .tip{
        color: red;
    }
    .gray-tip {
        font-family: sans-serif !important;
        font-weight: 10 !important;
        margin-top: 5px !important;
        color: #A8A8A8 !important;
    }
    .layui-table td, .layui-table th {
        padding: 9px 4px;
    }
    .newupload{
        width: 100px !important;
        height: 40px !important;
        background: url(__STATIC__/image/admin/nopic.png) no-repeat;
        background-size: 100% 100%;
        border:none;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        text-align: center;
    }
    .newInput{
        width: 80px !important;
    }
    .webuploader-container input {
        width: 100%;
        height: 100%;
    }

    .webuploader-pick {
        width: 100%;
        height: 100%;
        border: 1px solid blue;
    }
    .thumbBox {
        position: relative;
    }
    .thumbBox input{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>
<form id="form" class="layui-form" style="width:80%;">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
        </ul>
        <div class="layui-tab-content ">
            <input type="hidden" id="app_sn" value="{$app_sn}"/>
            <!--基本信息-->
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">型号</label>
                    <div class="layui-input-block">
                        <input type="text" name="model" class="layui-input model" lay-verify="required" value="{$data.model|default=''}" placeholder="请输入主板型号">
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">版本</label>
                    <div class="layui-input-block">
                        <input type="text" name="edition" class="layui-input edition" lay-verify="required" value="{$data.edition|default=''}" placeholder="请输入主板版本">
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">来源</label>
                    <div class="layui-input-block">
                        <input type="text" name="source" class="layui-input source" lay-verify="required" value="{$data.source|default='优合一众'}" placeholder="请输入来源">
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="num" class="layui-input num" lay-verify="required" value="{$data.num|default='100'}" placeholder="请输入数量">
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-col-md3 layui-col-xs5">
                        <input type="hidden" name="image" value="{$data.image|default=''}"  />
                        <div class="layui-upload-list thumbBox mag0 magt3">
                            <img class="layui-upload-img thumbImg" src="{$data.image_url|default=''}">
                            <input type="file" name="picture" id="picture" multiple="multiple" onchange="uploadFile('picture')" accept="image/jpg,image/jpeg,image/png" />
                        </div>
                    </div>
                </div>


                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea name="text" placeholder="描述" class="layui-textarea text">{$data.text|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block status">
                        {if !empty($data)}
                        <input type="radio" name="status" value="1" title="正常" {if condition="$data.status == 1"}checked{/if}>
                        <input type="radio" name="status" value="2" title="禁用" {if condition="$data.status == 2"}checked{/if}>
                        {else}
                        <input type="radio" name="status" value="1" title="正常" checked>
                        <input type="radio" name="status" value="2" title="禁用" >
                        {/if}
                    </div>
                </div>

                <input type="hidden" class="mainboard_id" name="mainboard_id" value="{$data.mainboard_id|default=''}">
            </div>

        </div>
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" id="addUser">确定</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
        </div>
    </div>
    </div>
</form>

{/block}

{block name="script"}
<script type="text/javascript" src="__STATIC__/layuicms/layui/layui.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/webuploader.min.js"></script>

<script>

    layui.use(['form','layer','layedit','upload','element'],function(){
        var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
            laypage = layui.laypage,
            upload = layui.upload,
            layedit = layui.layedit,
            element = layui.element,
            $ = layui.jquery;

        //用于同步编辑器内容到textarea
        layedit.sync(editIndex);
        layedit.sync(editIndex2);

        //一些事件监听
        element.on('tab(demo)', function (data) {
            console.log(data);
        });

        /**
         * 新增以及编辑后台用户
         */
        $("#addUser").click(function () {
            layedit.sync(editIndex);
            layedit.sync(editIndex2);
            var url = '{if empty($data)}{:url("$thisClass/add_mainboard")}{else/}{:url("$thisClass/edit_mainboard")}{/if}';
            var data = {
                mainboard_id: $(".mainboard_id").val(),
                model: $(".model").val(),
                edition: $(".edition").val(),
                source: $(".source").val(),
                status: $('input[name="status"]:checked').val(),
                num: $('.num').val(),
                image: $('input[name="image"]').val(),
                text: $(".text").val(),
                app_sn: $("#app_sn").val(),
            };
            $.ajax({
                url: url,
                method:"POST",
                data: data,
                success:function(res){
                    if(res.code ==1){
                        layer.msg(res.msg,{icon: 1});
                        setTimeout(function(){
                            //刷新父页面
                            parent.location.reload();
                        },500);

                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });


        //创建一个编辑器,套餐详情
        var editIndex = layedit.build('meal_content',{
            height : 535,
            uploadImage : {
                url : "{:url('api/Upload/uploadRichTextFile')}"
            }
        });
        //创建一个编辑器,套餐详情
        var editIndex2 = layedit.build('server_content',{
            height : 535,
            uploadImage : {
                url : "{:url('api/Upload/uploadRichTextFile')}"
            }
        });
        form.render();

    });

    // 上传图片
    function uploadFile(inputName){
        var data = new FormData();
        $.each($('input[name="'+inputName+'"]')[0].files, function(i, file) {
            data.append('file', file);

        });
        //清空图片
        $('#'+inputName).val('');
        //提交数据
        $.ajax({
            url: "{:url('api/Upload/uploadFile')}",
            type: 'POST',
            data: data,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            // dataType: 'json',
            success: function(res) {
                if (res.code == 1000) {
                    $('.thumbImg').attr('src',res.data.all_url);
                    $("input[name='image']").val(res.data.url);
                }
            },
            error: function(returndata) {
                parent.layer.msg('数据异常', {
                    icon: 2,
                    time: 2000
                });
                return false;
            }
        });
    }

    function dealPicture(){
        var div = $("div[id^=fileList]");
        var uploader;
        div.each(function(index){

            var $list = $('#fileList' + index);
            //上传图片,初始化WebUploader
            uploader = WebUploader.create({
                auto: true, // 选完文件后，是否自动上传。
                swf: '/static/admin/webupload/Uploader.swf', // swf文件路径
                server: "{:url('api/Upload/uploadFile')}", // 文件接收服务端。
                duplicate: true, // 重复上传图片，true为可重复false为不可重复
                pick: '#imgPicker' + index, // 选择文件的按钮。可选。

                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                },
                'onUploadSuccess': function (file, data, response) {
                    var src = data.data.all_url;
                    var title = data.data.url;
                    $("#data_photo" + index).val(title);
                    $("#img_data" + index).attr('src', src).show();
                }
            });

            uploader.on('fileQueued', function (file) {

            });

            // 文件上传成功
            uploader.on('uploadSuccess', function (file) {
                //$('#' + file.id).find('p.state').text('上传成功！');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                //$('#' + file.id).find('p.state').text('上传出错!');
            });
        });

    }


</script>
{/block}
